<script setup>
import { getHomeOthertab } from '../api/home';
import { ref, onBeforeMount } from 'vue';

// const props = defineProps(['id2','type2']);
// let id = props.id2;
// let type = props.type2;
// console.log("智能=",id,type)

let intelligentList = ref([])

let banner = ref([])

let Btn = ref([])

let strip = ref([])

let car = ref([])

let getHomeOthertabFun = () => {
    getHomeOthertab({
        page_type: 'activity',
        page_id: 10288
    }).then(res => {
        // console.log("智能的数据=>", res)
        intelligentList.value = res.data.data.data.sections;
        console.log("intelligentList=", intelligentList.value)
        banner.value = res.data.data.data.sections[0].body.items;
        Btn.value = res.data.data.data.sections[2].body.items.concat(res.data.data.data.sections[3].body.items)
        strip.value = res.data.data.data.sections[5].body.items.concat(res.data.data.data.sections[7].body.items)
        // console.log(strip.value)
        car.value = res.data.data.data.sections[25].body.items.concat( res.data.data.data.sections[27].body.items )
    })
}

onBeforeMount(() => {
    getHomeOthertabFun()
})

</script>

<template>
    <van-loading type="spinner" color="#ff6900" v-if="!intelligentList" vertical/>
    <div style="width:100%;background-color:#eff1f3;" v-else>
        <!-- 轮播图 -->
        <div class="intelligent-banner">
            <van-swipe :autoplay="3000" lazy-render indicator-color="white">
                <van-swipe-item v-for="(item, index) in banner" :key="index">
                    <img :src="'https:' + item.img_url" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <!-- 按钮 -->
        <div class="intelligent-Btn">
            <ul>
                <li v-for="(item, index) in Btn" :key="index">
                    <img :src="'https:' + item.img_url">
                </li>
            </ul>
        </div>
        <!-- 第三部分 -->
        <div class="strip">
            <div class="strip-pic" v-for="(item, index) in strip" :key="index">
                <img :src="'https:' + item.img_url">
            </div>
        </div>
        <!-- 小家电 -->
        <div class="small-home" v-if="intelligentList[9]">
            <img :src="'https:' + intelligentList[9].body.items[0].img_url" alt="" srcset="">
        </div>
        <div class="small-home-product" v-if="intelligentList[11]">
            <div class="small-home-product-item" v-for="(item, index) in intelligentList[11].body.items" :key="index">
                <img :src="'https:' + item.img_url">
                <p class="product_name">{{ item.product_name }}</p>
                <p class="product_brief">{{ item.product_brief }}</p>
                <p class="show_price"> ￥{{ item.show_price }}</p>
            </div>
        </div>
<!-- 智能穿戴 -->
        <div class="wearing" v-if="intelligentList[13]">
            <img :src="'https:' +intelligentList[13].body.items[0].img_url" alt="" srcset="">
        </div>
        <!-- 耳机音箱 -->
        <div class="headset" v-if="intelligentList[15]">
            <img :src="'https:' +intelligentList[15].body.items[0].img_url" alt="" srcset="">
        </div>
        <div class="speaker" v-if="intelligentList[17]">
            <div class="speaker-product-item" v-for="(item, index) in intelligentList[17].body.items" :key="index">
                <img :src="'https:' + item.img_url">
                <p class="product_name">{{ item.product_name }}</p>
                <p class="product_brief">{{ item.product_brief }}</p>
                <p class="show_price"> ￥{{ item.show_price }}</p>
            </div>
        </div>
        <!-- 品质灯具 -->
        <div class="Luminaires" v-if="intelligentList[19]">
            <img :src="'https:' +intelligentList[19].body.items[0].img_url">
        </div>
        <!-- 生活家居 -->
        <div class="furnishings" v-if="intelligentList[21]">
            <img :src="'https:' +intelligentList[21].body.items[0].img_url">
        </div>
        <!-- 便捷出行 -->
        <div class="travel" v-if="intelligentList[23]">
            <img :src="'https:' +intelligentList[23].body.items[0].img_url">
        </div>
<!-- 车 -->
        <div class="car">
            <div class="car-product-item" v-for="(item, index) in car" :key="index">
                <img :src="'https:' + item.img_url">
                <p class="product_name">{{ item.product_name }}</p>
                <p class="product_brief">{{ item.product_brief }}</p>
                <p class="show_price"> ￥{{ item.show_price }}</p>
            </div>
        </div>
        <!-- 个护清洁 -->
        <div class="clean" v-if="intelligentList[29]">
            <img :src="'https:' +intelligentList[29].body.items[0].img_url">
        </div>
        <!-- 儿童专区 -->
        <div class="children" v-if="intelligentList[31]">
            <img :src="'https:' +intelligentList[31].body.items[0].img_url">
        </div>
        <!-- 配件耗材 -->
        <div class="parts" v-if="intelligentList[33]">
            <img :src="'https:' +intelligentList[33].body.items[0].img_url">
        </div>
        <div class="consumables" v-if="intelligentList[35]">
            <div class="consumables-product-item" v-for="(item, index) in intelligentList[35].body.items" :key="index">
                <img :src="'https:' + item.img_url">
                <p class="product_name">{{ item.product_name }}</p>
                <p class="product_brief">{{ item.product_brief }}</p>
                <p class="show_price"> ￥{{ item.show_price }}</p>
            </div>
        </div>

        <!-- 9.9 -->
        <div class="footer" v-if="intelligentList[37]">
            <img :src="'https:' +intelligentList[37].body.items[0].img_url">
        </div>

    </div>
</template>

<style lang="scss">
* {
    padding: 0;
    margin: 0;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    // background-color: #39a9ed;
}

.intelligent-Btn {
    width: 100%;
    margin: 8px 0px;

    ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        li {
            width: 20%;
            height: 80px;
        }

        img {
            width: 100%;
            height: 100%;
        }
    }

}

.strip {
    width: 100%;
    height: 134px;
    // margin: 8px 0px;
    background-color: #fff;

    .strip-pic {
        width: 100%;
        height: 57px;
        margin-bottom: 8px;

        img {
            width: 100%;
            height: 100%;
        }
    }


}

.small-home {
    width: 100%;
    height: 50px;

    img {
        width: 100%;
        height: 100%;
    }
}

.small-home-product,.speaker,.car,.consumables{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    .small-home-product-item,.speaker-product-item,.car-product-item,.consumables-product-item{
        width: 30%;
        height: 191px;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 9px;
        border-radius: 5px;
        overflow: hidden;

        img {
            width: 100%;
            height: 115px;
        }

        .product_name,
        .product_brief {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            line-height: 20px;

        }

        .product_name {
            font-size: 12px;
            font-weight: 600;
            margin-top: 5px;
        }

        .product_brief {
            font-size: 11px;
        }

        .show_price {
            font-size: 15px;
            font-weight: 800;
            color: #f54b4b;
        }



    }

}
.wearing,.headset,.clean,.children,.parts{
    width: 100%;
    height: 50px;
    img{
        width: 100%;
        height: 100%;
    }
}
.Luminaires,.furnishings,.travel{
    width: 100%;
    height: 50px;
    img{
        width: 100%;
        height: 100%;
    }
}
.footer{
    width: 100%;
    height: 146px;
    img{
        width: 100%;
        height: 100%;
    }
}
</style>